<template>
  <div id="popup" class="popup" v-if="popvisible" :style="popsty">
    <span>摄像头:{{ shexiang.name }}</span>
    <el-icon color="#45A5FE" size="20px" @click="handleCancel"><CircleClose /></el-icon>
    <p>位置:{{ shexiang.pos }}</p>
    
    <!-- <el-button @click="handleCancel">取消</el-button> -->
    <div>
      <img src="../data/video/莲花新洲路口正中（190.192.11.133）.mp4" />
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { useUsersStore } from '@/stores/user'
import { mapActions, storeToRefs } from 'pinia'
import { useGlobalMap } from '@/utils/globalMap.js'
import { Point } from '@/zondy_api/Point.js'
import { CircleClose } from '@element-plus/icons-vue'
import { delFeature } from '@/zondy_api/DelFeature.js'
import { docLayer } from '@/zondy_libs/index.js'
var map
let popvisible = ref(false)
let popsty = ref({})
var source
var layer
var position
const formLabelWidth = '70px'
onMounted(() => {
  map = useGlobalMap()
  source = new ol.source.Vector({})
  var style = new ol.style.Style({
    //形状
    image: new ol.style.Icon({
      anchor: [0.3, 0.3],
      anchorOrigin: 'bottom-right',
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      offsetOrigin: 'top-right',
      offset: [10, 0],
      //图标缩放比例
      scale: 0.5,
      //透明度
      opacity: 1,
      //图标的url
      src: '/src/images/location.png',
    }),
  })
  layer = new ol.layer.Vector({
    source,
    style,
  })
  map.addLayer(layer)
})
const store = useUsersStore()
const { spjkDialog, activeIndex } = storeToRefs(store)
//表格数据
let shexiang = ref({
  number: '',
  pos: '',
  url: '',
})
watch(
  () => store.spjkDialog,
  () => {
    if (store.spjkDialog) {
      console.log('添加map');
      map.on('click', spjkpop)
    }
  }
)
//出现视频监控的方法
const spjkpop = (evt) => {
  //点查询
  const positionquery = evt.coordinate
  var service = {
    name: 'guanggu',
    layerId: 3,
  }
  Point.query({
    position: positionquery,
    service,
    success: handleQuery,
  })
  function handleQuery(res) {
    if (res) {
      // fid=res.SFEleArray[0].FID
      const eventnew = res.SFEleArray[0].AttValue
      console.log(res.SFEleArray[0])
      shexiang.value = {
        name: eventnew[1],
        pos: eventnew[2],
        url: eventnew[3],
      }
      position = []
      let position1 = ref(0)
      let position2 = ref(0)
      position[0] = res.SFEleArray[0].bound.xmax
      position[1] = res.SFEleArray[0].bound.ymax
      let positionnew
      positionnew = map.getPixelFromCoordinate(position)
      position1.value = positionnew[0]
      position2.value = positionnew[1]
      popsty.value = {
        left: `${position1.value + 2}px`,
        top: `${position2.value + 37}px`,
      }
      popvisible.value = true
      map.on('moveend', function () {
        positionnew = map.getPixelFromCoordinate(position)
        position1.value = positionnew[0]
        position2.value = positionnew[1]
        popsty.value = {
          left: `${position1.value + 2}px`,
          top: `${position2.value + 37}px`,
        }
      })
      var point = new ol.Feature({
        geometry: new ol.geom.Point(position),
      })
      source.clear()
      source.addFeature(point)
    }
  }
}
const handleCancel = () => {
  store.spjkDialog = false
  popvisible.value = false
  map.un('click', spjkpop)
  source.clear()
  store.activeIndex = '0'
  // docLayer.refresh()
}
</script>

<style scoped>
.popup {
  position: absolute;
  width: 200px;
  height: 160px;
  z-index: 500;
  background-color: white;
  border: 1px solid #45A5FE;
  border-radius: 10px;
  padding: 10px 10px;
  transition: all 0.5s;
  font-size: small;
}
.popup .el-icon{
position: relative;
top: 2px;
right: -100px;
}
.popup img {
  width: 200px;
  height: 120px;
}
</style>
